<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四下第7课《数据校验》文件MD5校验</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .card-effect {
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }
        
        .bounce-in {
            animation: bounceIn 0.6s ease-out;
        }
        
        @keyframes bounceIn {
            0% {
                transform: scale(0.3);
                opacity: 0;
            }
            50% {
                transform: scale(1.05);
            }
            70% {
                transform: scale(0.9);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
        
        .pulse-animation {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: .5;
            }
        }
        
        .md5-result {
            font-family: 'Courier New', monospace;
            word-break: break-all;
            background-color: #e0f2fe;
            border: 1px solid #0284c7;
            border-radius: 0.5rem;
            padding: 0.75rem;
            margin-top: 0.75rem;
        }
    </style>
</head>
<body class="gradient-bg min-h-screen flex items-center justify-center">
    <div class="absolute inset-0 bg-black opacity-10"></div>
    
    <!-- 游戏内容 -->
    <div id="gameContent" relative z-10>
        <div class="card-effect rounded-2xl p-8 shadow-2xl text-center w-full max-w-6xl mx-4">
            <!-- 游戏标题 -->
            <div class="mb-6">
                <h1 class="text-4xl font-bold text-gray-800 mb-2">🔐 MD5 文件校验</h1>
                <p class="text-gray-600">四下第7课《数据校验》文件MD5校验</p>
            </div>
            
            <!-- 提示信息 -->
            <div class="bg-blue-50 border border-blue-200 text-blue-800 p-4 rounded-lg mb-6">
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        <i class="fas fa-info-circle text-blue-500 mt-1 mr-2"></i>
                    </div>
                    <div class="text-left">
                        <p class="font-medium mb-1 text-lg">使用提示：</p>
                        <ol class="list-decimal list-inside space-y-1 text-base">
                            <li>创建一个文本文件或Word文件写入内容并保存到桌面上（比如a.txt）；</li>
                            <li>通过左侧的【生成文件的MD5值】生成文件的MD5值，并复制文件的MD5值；</li>
                            <li>修改a.txt文件的内容；</li>
                            <li>通过右侧的【验证文件的MD5值】来验证文件是否改变。</li>
                        </ol>
                    </div>
                </div>
            </div>
            
            <!-- 功能区域 -->
            <div class="flex flex-wrap">
                <div class="w-full md:w-1/2 p-4">
                    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                        <div class="bg-cyan-500 text-center py-3 text-white font-bold">
                            <i class="fas fa-fingerprint mr-2"></i>生成文件的 MD5 值
                        </div>
                        <div class="p-6">
                            <form id="fileForm">
                                <div class="mb-4">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-file-upload text-cyan-600 mr-2"></i>
                                        <label for="fileInput" class="block text-lg font-bold text-gray-800">选择文件</label>
                                        <span class="text-sm text-gray-600 ml-2">支持：.txt,.pdf,.doc,.docx</span>
                                    </div>
                                    <input class="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent" type="file" id="fileInput" accept=".txt,.pdf,.doc,.docx" required>
                                </div>
                                <button type="submit" class="w-full bg-cyan-600 hover:bg-cyan-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-cyan-500">
                                    <i class="fas fa-calculator mr-2"></i>生成文件的 MD5 值
                                </button>
                            </form>
                            <div id="md5Result" class="mt-4"></div>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2 p-4">
                    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                        <div class="bg-yellow-500 text-center py-3 text-white font-bold">
                            <i class="fas fa-shield-alt mr-2"></i>验证文件的 MD5 值
                        </div>
                        <div class="p-6">
                            <form id="verifyForm">
                                <div class="mb-4">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-file-upload text-yellow-600 mr-2"></i>
                                        <label for="verifyFileInput" class="block text-lg font-bold text-gray-800">选择文件</label>
                                        <span class="text-sm text-gray-600 ml-2">支持：.txt,.pdf,.doc,.docx</span>
                                    </div>
                                    <input class="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent" type="file" id="verifyFileInput" accept=".txt,.pdf,.doc,.docx" required>
                                </div>
                                <div class="mb-4">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-key text-yellow-600 mr-2"></i>
                                        <label for="md5Input" class="block text-lg font-bold text-gray-800">输入 MD5 值</label>
                                    </div>
                                    <input class="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent" type="text" id="md5Input" placeholder="请输入32位MD5值" required>
                                </div>
                                <button type="submit" class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-yellow-500">
                                    <i class="fas fa-check-double mr-2"></i>验证 MD5 是否正确
                                </button>
                            </form>
                            <div id="verifyResult" class="mt-4"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

    <!-- 引入 CryptoJS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <script>
        document.getElementById('fileForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 防止表单默认提交
            var fileInput = document.getElementById('fileInput');
            var file = fileInput.files[0];
            var md5Result = document.getElementById('md5Result');
        
            // 清空之前的结果
            md5Result.innerHTML = '';
            
            if (file) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var fileContent = e.target.result;
                    var md5 = CryptoJS.MD5(fileContent).toString(); // 计算 MD5 值
                    md5Result.innerHTML = `
                        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg">
                            <div class="flex items-center mb-2">
                                <i class="fas fa-check-circle mr-2"></i>
                                <span class="font-bold">文件 MD5 值生成成功！</span>
                            </div>
                            <div class="mt-2 text-left">
                                <p class="text-sm mb-1">文件的 MD5 值为:</p>
                                <div class="md5-result text-green-800 font-mono text-sm">${md5}</div>
                            </div>
                        </div>
                    `;
                };
                reader.readAsBinaryString(file);
            } else {
                md5Result.innerHTML = `
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg flex items-center">
                        <i class="fas fa-exclamation-circle mr-2"></i>
                        <span>请选择要上传的文件</span>
                    </div>
                `;
            }
        });

        document.getElementById('verifyForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 防止表单默认提交
            var fileInput = document.getElementById('verifyFileInput');
            var file = fileInput.files[0];
            var md5Input = document.getElementById('md5Input');
            var md5Value = md5Input.value.trim();
            var verifyResult = document.getElementById('verifyResult');
            
            // 清空之前的结果
            verifyResult.innerHTML = '';
        
            if (file && md5Value) {
                // 验证MD5格式
                if (!/^[a-fA-F0-9]{32}$/.test(md5Value)) {
                    verifyResult.innerHTML = `
                        <div class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded-lg flex items-center">
                            <i class="fas fa-exclamation-triangle mr-2"></i>
                            <span>MD5 值格式不正确，请输入32位十六进制字符</span>
                        </div>
                    `;
                    return;
                }
                
                var reader = new FileReader();
                reader.onload = function(e) {
                    var fileContent = e.target.result;
                    var md5 = CryptoJS.MD5(fileContent).toString(); // 计算 MD5 值
                    if (md5.toLowerCase() === md5Value.toLowerCase()) {
                        verifyResult.innerHTML = `
                            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-check-circle mr-2"></i>
                                    <span class="font-bold">MD5 值正确！文件未改变！</span>
                                </div>
                                <div class="mt-2 text-left">
                                    <p class="text-sm mb-1">文件的 MD5 值为:</p>
                                    <div class="md5-result text-green-800 font-mono text-sm">${md5}</div>
                                </div>
                            </div>
                        `;
                    } else {
                        verifyResult.innerHTML = `
                            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-times-circle mr-2"></i>
                                    <span class="font-bold">MD5 值错误！文件已发生改变！</span>
                                </div>
                                <div class="mt-2 text-left">
                                    <p class="text-sm mb-1">原始 MD5 值:</p>
                                    <div class="md5-result text-red-800 font-mono text-sm">${md5Value}</div>
                                    <p class="text-sm mb-1 mt-2">当前 MD5 值:</p>
                                    <div class="md5-result text-red-800 font-mono text-sm">${md5}</div>
                                </div>
                            </div>
                        `;
                    }
                };
                reader.readAsBinaryString(file);
            } else {
                verifyResult.innerHTML = `
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg flex items-center">
                        <i class="fas fa-exclamation-circle mr-2"></i>
                        <span>请选择要上传的文件并输入 MD5 值</span>
                    </div>
                `;
            }
        });

        // 页面加载时执行初始化
        window.onload = function() {
            // 初始化页面
        };
    </script>
</body>
</html>